<template>
  <div class="imageTextNav" style="background:white;">
    <div
      class="cap-image-ad__image-wrapper"
      v-for="(item, index) in config.sub_entry"
      :key="index"
    >
      <a
        :href="item.link"
        class="cap-image-ad__link"
        style="color: rgb(0, 0, 0);"
      >
        <img v-if="!config.show_method" :src="item.image_url" alt="" class="cap-image-ad__image" />
        <h3 class="cap-image-ad__nav-title">{{ item.title }}</h3>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    }
  },
  methods: {
    jump() {
      this.$router.push(this.config.link)
    }
  }
}
</script>

<style lang="less">
.imageTextNav {
  position: relative;
  width: 100%;
  min-height: 20px;
 
  display: flex;
  justify-content: center;
  .cap-image-ad__image-wrapper {
    text-align: center;
    width: 100%;
    .cap-image-ad__link{
      text-decoration: none;
      display: inline-block;
    }
    .cap-image-ad__image {
      width: 100%;
      height: 40px;
    }
    .cap-image-ad__nav-title {
      padding-right: 5px;
      padding-left: 5px;
      font-size: 12px;
      font-weight: normal;
      margin: 10px 0;
    }
  }
}
</style>
